<template>
	<div>
		<el-tabs
			v-model="editableTabsValue"
			type="border-card"
			closable
			@tab-change="handleClick"
		>
			<el-tab-pane v-for="item in tabs" :key="item.query" :label="item.label" :name="item.query">
				<div v-if="item.query === editableTabsValue">
					<router-view></router-view>
				</div>
			</el-tab-pane>
		</el-tabs>
	</div>
</template>

<script setup>
	import { ref } from 'vue'
	import { useRouter, useRoute } from 'vue-router'
	
	const route = useRoute()
	const router = useRouter()
	const editableTabsValue = ref('')
	const tabs = ref([])
	
	const addTab = (tab) => {
		const hasTab = ref(false)
		for (const i in tabs.value) {
			console.log(tabs.value[i], tab)
			if (tabs.value[i].query === tab.id + ':' + tab.type + ':' + tab.name) {
				hasTab.value = true
			}
		}
		if (!hasTab.value) {
			tabs.value.push({
				...tab,
				label: tab.name,
				name: tab.name,
				query: tab.id + ':' + tab.type + ':' + tab.name
			})
			console.log(tab.name)
		}
		editableTabsValue.value = tab.id + ':' + tab.type + ':' + tab.name
	}
	
	const handleClick = (tab, e) => {
		console.log('tab', tab)
		const arr = tab.split(":")
		console.log('arr', arr)
		const data = {
			id: arr[0],
			type: arr[1],
			name: arr[2]
		}
		router.push({
			path: "/table",
			query: data
		})
	}
	
	defineExpose({
		addTab
	})
</script>

<style>
</style>